<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('讲座报告列表')"/>
    <style>
        .modal-right {
            position: fixed;
            right: 0;
            margin: 0;
            height: 100%;
            display: flex;
            align-items: stretch;
        }

        .modal-right .modal-content {
            height: 100%;
            width: 70%;
            margin-left: auto;
        }
        .modal-right .but{
            position: absolute;
            right: 2%;
            bottom: 1.3%;
            background: red;
            color: white;
            border: none;
            border-radius: 4px;
        }

        .progress_inner {
            height: 10%;
            width: 100%;
            position: relative;
        }

        .progress_inner__step {
            width: 33.33%;
            font-size: 12px;
            padding: 0 5px;
            transition: all 0.4s;
            float: left;
            text-align: center;
            position: relative;
        }

        .progress_inner__step label {
            padding-top: 30px;
            display: block;
            position: relative;
            cursor: pointer;
        }

        .progress_inner__step:before {
            content: "1";
            width: 24px;
            height: 24px;
            color: #2196F3;
            background: white;
            line-height: 22px;
            border: 2px solid #2196F3;
            font-size: 12px;
            top: 0;
            border-radius: 50%;
            transition: all 0.4s;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            font-weight: bold;
            z-index: 11;
        }

        .progress_inner__step:nth-of-type(2):before {
            content: "2";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step:nth-of-type(3):before {
            content: "3";
            color: #9E9E9E;
            border-color: #9E9E9E;
        }

        .progress_inner__step.completed:before {
            content: "✓";
            color: #4CAF50;
            border-color: #4CAF50;
            line-height: 22px;
            font-size: 14px;
        }

        .progress_inner__step.active:before {
            color: #2196F3;
            border-color: #2196F3;
            background: white;
        }

        .progress_inner__step.pending:before {
            color: #9E9E9E;
            border-color: #9E9E9E;
            background: white;
        }

        .progress_inner__bar {
            height: 3px;
            left: 16.665%;
            right: 16.665%;
            background: #E0E0E0;
            position: absolute;
            top: 12px;
            z-index: -1;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress_inner__bar--progress {
            height: 100%;
            background: #4CAF50;
            width: 0;
            transition: width 0.6s ease;
        }

        .status-text {
            color: #9E9E9E;
            font-weight: normal;
            transition: all 0.4s;
            font-size: 12px;
        }

        .status-text.active {
            color: #2196F3;
            font-weight: bold;
        }

        .status-text.completed {
            color: #4CAF50;
            font-weight: bold;
        }

        .buttons {
            margin-top: 20px;
            text-align: center;
        }

        button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 3px;
            margin: 0 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            font-size: 12px;
        }

        button:hover {
            background: #1976D2;
        }

        button:last-child {
            background: #9E9E9E;
        }

        button:last-child:hover {
            background: #757575;
        }

        /* 新增的流程记录样式 */
        .timeline-title {
            font-weight: bold;
            font-size: 14px;
            color: #333;
            text-align: left;
            /*margin: 0 0 25px 20px;*/
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            /*padding-bottom: 15px;*/
        }


        .track-rcol {
            height: 90%;
            width: 100%;
            max-width: 500px;
            margin: 20px auto;
            overflow-y: auto;  /* 垂直方向溢出时显示滚动条 */
            scrollbar-width: none;
        }
        .track-list {
            margin: 20px;
            padding-left: 5px;
            position: relative;
        }
        .track-list ul {
            padding-left: 0;
        }
        .track-list li {
            position: relative;
            padding: 5px 0 10px 25px;
            line-height: 1.4;
            border-left: 2px solid #d9d9d9;
            color: #666;
            list-style: none;
            /*text-align: left;*/
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li.first {
            color: #666;
            padding-top: 0;
            /*border-left-color: #fff;*/
        }
        .track-list li .node-icon {
            position: absolute;
            left: -7px;
            top: 18px;
            width: 8px; /* 调圆点*/
            height: 8px;
            background: #C0C0C0;
            border-radius: 50%;
            transition: all 0.4s ease; /* 添加过渡效果 */
            border: 2px solid #E0E0E0;
            box-sizing: content-box;
        }
        .track-list li.first .node-icon {
            background: #C0C0C0; /* 天蓝色 */
            width: 8px;
            height: 8px;
            left: -8px;
        }
        .track-list li .time {
            display: block;
            margin-bottom: 3px;
            font-size: 11px;
            color: #888;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }
        .track-list li .txt {
            display: block;
            font-size: 12px;
            transition: all 0.4s ease; /* 添加过渡效果 */
        }

        /* 悬停效果 */
        .track-list li:hover {
            color: #333;
        }
        .track-list li:hover .node-icon {
            transform: scale(1.3);
            background: #ed8088;
        }
        .track-list li:hover .time {
            color: #666;
        }

        /* 新增审核状态样式 */
        .approve-status {
            margin-top: 10px;
            text-align: center;
        }
        .approve-status label {
            margin: 0 10px;
            cursor: pointer;
        }
        .approve-status input {
            margin-right: 5px;
        }
    </style>
</head>
<body class="gray-bg">

<div class="row">

    <div class="tabs-container">
        <div class="tab-content">

            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <div class="container-div">
                        <div class="row">
<!--                            <div class="col-sm-12 search-collapse"  shiro:hasPermission="system:report:sousuo">-->
<!--                                <form id="formId-1">-->
<!--                                    <div class="select-list">-->
<!--                                        <ul>-->
<!--                                            <li>-->
<!--                                                <label>讲座主题：</label>-->
<!--                                                <input type="text" name="reportTheme"/>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--&lt;!&ndash;                                                <label>主办单位：</label>&ndash;&gt;-->
<!--                                                <label>姓名：</label>-->
<!--                                                <input type="text" name="teacherName"/>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--&lt;!&ndash;                                                <label>讲座地点：</label>&ndash;&gt;-->
<!--                                                <label>教研室：</label>-->
<!--                                                <input type="text" name="keyanshi"/>-->
<!--                                            </li>-->
<!--                                            <li>-->
<!--                                                <a class="btn btn-primary btn-rounded btn-sm"-->
<!--                                                   onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
<!--                                                <a class="btn btn-warning btn-rounded btn-sm"-->
<!--                                                   onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>-->
<!--                                            </li>-->
<!--                                        </ul>-->
<!--                                    </div>-->
<!--                                </form>-->
<!--                            </div>-->

                            <div id="toolbar">
                                <div class="btn-group-sm" role="group">
<!--                                <div class="btn-group-sm" id="toolbar" role="group">-->
                                    <a class="btn btn-success" onclick="$.operate.addTab()"
                                       shiro:hasPermission="system:report:add">
                                        <i class="fa fa-plus"></i> 添加
                                    </a>
                                    <!--                <a class="btn btn-primary single disabled" onclick="$.operate.editTab()" shiro:hasPermission="system:report:edit">-->
                                    <!--                    <i class="fa fa-edit"></i> 编辑-->
                                    <!--                </a>-->
                                    <!--                                <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"-->
                                    <!--                                   shiro:hasPermission="system:report:remove">-->
                                    <!--                                    <i class="fa fa-remove"></i> 批量删除-->
                                    <!--                                </a>-->
<!--                                    <a class="btn btn-warning" onclick="$.table.exportExcel()"-->
                                    <a class="btn btn-warning" onclick="$.table.IfexportExcel()"
                                       shiro:hasPermission="system:report:export">
                                        <i class="fa fa-download"></i> 导出
                                    </a>
                                </div>
                                <div style="display: flex; align-items: center; gap: 30px; padding: 6px 36px; border-radius: 4px;">
                                    <th:block th:replace="include :: status-circles"/>
                                </div>
                            </div>
                            <div class="col-sm-12 select-table table-striped">
                                <table id="bootstrap-table1"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<!--<div class="wrapper wrapper-content fadeInRight" style="position: absolute; left: -9999px;">-->
<!--    <div class="row">-->
<!--        <div class="col-sm-4">-->
<!--            <div class="ibox ">-->
<!--                <div class="ibox-content">-->
<!--                    <div class="modal inmodal" id="lcjl_Moda" tabindex="-1" role="dialog" aria-hidden="true">-->
<!--                        <div class="modal-dialog modal-right" >-->
<!--                            <div class="modal-content animated bounceInRight" style="background-color: #00f7de">-->
<!--                                <div class="modal-header">-->
<!--                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span-->
<!--                                            class="sr-only">关闭</span>-->
<!--                                    </button>-->
<!--                                </div>-->
<!--                                <div class="modal-body">-->
<!--                                    -->
<!--                                </div>-->
<!--                                <div class="modal-footer">-->
<!--                                    <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div class="wrapper wrapper-content fadeInRight" style="position: absolute; left: -9999px;">
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox ">
                <div class="ibox-content">
                    <div class="modal inmodal" id="lcjl_Moda" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog modal-right" >
                            <div class="modal-content animated bounceInRight">
                                <div class="modal-header" style="height: 5%!important;">
                                    <!-- 流程记录标题 - 放在左上角 -->
                                    <div class="timeline-title">流程记录</div>
                                </div>
                                <div class="modal-body" style="height: 85%!important;">
                                    <!-- 流程记录标题 - 放在左上角 -->

                                    <div class='progress_inner'>
                                        <div class='progress_inner__step active' id='step-1'>
                                            <label for='step-1'><span class="status-text active">待提交</span></label>
                                        </div>
                                        <div class='progress_inner__step pending' id='step-2'>
                                            <label for='step-2'><span class="status-text">待审核</span></label>
                                        </div>
                                        <div class='progress_inner__step pending' id='step-3'>
                                            <label for='step-3'><span class="status-text">已完成</span></label>
                                        </div>
                                        <div class='progress_inner__bar' style="z-index: 10">
                                            <div class='progress_inner__bar--progress' id='progress-bar'></div>
                                        </div>
                                    </div>


                                    <!-- 流程记录内容 - 放在流程图下方 -->
                                    <div class="track-rcol">
                                        <div class="track-list">
                                            <ul id="event-list">
                                                <li class="first">
                                                    <i class="node-icon"></i>
                                                    <span class="time" id="current-time">操作日期</span>
                                                    <span class="txt">[新增] - 哈尔滨信息工程学院</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-white but" data-dismiss="modal">关闭</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:report:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:report:remove')}]];
    var socialTitleDatas = [[${@dict.getType('social_title')}]];
    var schoolTitleDatas = [[${@dict.getType('tea_zhicheng')}]];
    var prefix = ctx + "system/report";
    var datas = [[${@dict.getType('sci_report_status')}]];
    var proFlag = [[${@permission.hasPermi('system:report:process')}]];  // 教研室批阅
    var infoFlag = [[${@permission.hasPermi('system:report:info')}]];  // 查看
    var checkFlag = [[${@permission.hasPermi('system:report:check')}]];  // 核查
    var xyproFlag = [[${@permission.hasPermi('system:report:xyprocess')}]];  // 学院批阅
    var tuihuiFlag = [[${@permission.hasPermi('system:report:tuihui')}]];  // 退回  == 》 教研室负责人的特权
    var chexiaoFlag = [[${@permission.hasPermi('system:report:chexiao')}]];  // 撤销 == 》 学院负责人的特权
    var zgqxtuihuiFlag = [[${@permission.hasPermi('system:report:zgqxtuihui')}]];  // 驳回  == 》 科研室负责人的特权
    var submitFlag = [[${@permission.hasPermi('system:report:submit')}]];  // 提交

    function getUrl(tableId) {
        var year = localStorage.getItem("year");
        return prefix + "/list/" +tableId+ "?year=" + year;
    }

    $(function () {
        function initTable(options) {
            // 获取当前表格的ID
            var tableId = options.id;
            // 根据表格ID生成URL
            // options.url = getUrl();
            options.url = getUrl(tableId);
            // 使用生成的选项初始化表格
            $.table.init(options);
        }


        // tab-1  项目申请
        var options1 = {
            id: "bootstrap-table1",
            url: prefix + "/list",
            // url:getUrl($('table').attr('id')),
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            detailUrl: prefix + "/detail/{id}",
            removeUrl: prefix + "/remove",
            tijiaoUrl: prefix + "/tijiao",
            exportUrl: prefix + "/export",
            overUrl: prefix + "/over/{id}", // 结项申请后端路径
            modalName: "讲座报告",
            rowStyle: function(row, index) {
                // 根据状态返回样式对象
                switch(row.state) {
                    case '0': // 草稿
                        return { css: { "color": "#e6a344" } }; // 黄色
                    case '1': // 待教研室审核
                        return { css: { "color": "#2c99ff" } }; // 蓝色
                    case '2': // 待科研处审核
                        return { css: { "color": "#2c99ff" } }; // 蓝色
                    case '3': // 教研室驳回
                        return { css: { "color": "#e6a344" } }; // 黄色
                    case '4': // 已通过
                        return { css: { "color": "#67c23a" } }; // 绿色
                    case '5': // 科研处驳回
                        return { css: { "color": "#e6a344" } }; // 黄色
                    case '6': // 待学院处理
                        return { css: { "color": "#2c99ff" } }; // 蓝色
                    case '7': // 学院驳回
                        return { css: { "color": "#e6a344" } }; // 黄色
                    default:
                        return {css: { "color": "#000000" }};
                }
            },
            columns: [
                // {
                // checkbox: false
                // },
                {
                    field: 'number',
                    title: '序号',
                    width:5 ,
                    align:'center',
                    switchable:false,
                    formatter:function(value,row,index){
                        //使用若依框架提供的serialNumber方法来生成序号
                        return $.table.serialNumber(index, 'bootstrap-table1');
                    }

                },
                {
                    field: 'id',
                    align: 'center',
                    title: 'id',
                    visible: false
                },
                {
                    field: 'xueyuan',
                    align: 'center',
                    title: '学院'
                },
                {
                    field: 'keyanshi',
                    align: 'center',
                    title: '专业'
                },
                {
                    field: 'teacherName',
                    align: 'center',
                    title: '申请人'
                },

                {
                    field: 'reportTheme',
                    align: 'center',
                    title: '讲座主题'
                },
                {
                    field: 'reportSubject',
                    align: 'center',
                    title: '讲座题目'
                },
                {
                    field: 'hostUnit',
                    align: 'center',
                    title: '主办单位'
                },
                {
                    field: 'reportTime',
                    align: 'center',
                    title: '讲座时间'
                },
                {
                    field: 'reportPlace',
                    align: 'center',
                    title: '讲座地点'
                },
                {
                    field: 'reportNumber',
                    align: 'center',
                    title: '参与人数'
                },
                {
                    field: 'reportKeyanfen',
                    align: 'center',
                    title: '积分'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        var hasPreviousButtons = false; // 标记前面是否有按钮

                        if (row.state == 0) {
                            if (row.userId == row.uid) {
                                actions.push('<a  class="btn  btn-xs ' + submitFlag + '" href="javascript:void(0)" onclick="$.operate.tijiao(\'' + row.id + '\')">提交</a> ');
                                actions.push('<a   class="btn  btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '/xiugai' + '\')">编辑</a> ');
                                actions.push('<a style="color: red" class="btn  btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')">删除</a>');
                                hasPreviousButtons = true; // 设置前面有按钮的标志为true
                            }
                        }else if (row.state == 1) {
                            actions.push('<a  class="btn btn-xs ' + proFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/pro' + '\')">批阅</a> ');
                            if (proFlag != 'hidden')
                                hasPreviousButtons = true; // 设置前面有按钮的标志为true
                        }
                        else if (row.state == 6){
                              actions.push('<a  class="btn btn-xs ' + xyproFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/xypro' + '\')">批阅</a> ');
                            actions.push('<a style="color: red" class="btn btn-xs ' + tuihuiFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/tuihui' + '\')">撤销</a> ');
                            if (tuihuiFlag != 'hidden' || xyproFlag != 'hidden')
                                hasPreviousButtons = true; // 设置前面有按钮的标志为true

                        } else if ((row.state == 3 || row.state == 5 || row.state == 7) && row.userId == row.uid) {
                            actions.push('<a class="btn btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '/gengxin' +'\')">编辑</a> ');
                            hasPreviousButtons = true; // 设置前面有按钮的标志为true
                        }
                        else if (row.state == 2) {
                              actions.push('<a  class="btn btn-xs ' + checkFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/check' + '\')">核查</a> ');
                            actions.push('<a style="color: red" class="btn btn-xs ' + chexiaoFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/xytuihui' + '\')">撤销</a> ');
                            if (checkFlag != 'hidden' || chexiaoFlag != 'hidden')
                                hasPreviousButtons = true; // 设置前面有按钮的标志为true
                              }
                        else if (row.state == 4) {
                            actions.push('<a style="color: red" class="btn btn-xs ' + zgqxtuihuiFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/zgqxtuihui' + '\')">撤销</a> ');
                            if (zgqxtuihuiFlag != 'hidden')
                                hasPreviousButtons = true;
                        }
                        if (hasPreviousButtons) {
                            actions.push('<br>'); // 只有前面有按钮时才换行
                        }
                        actions.push('<a  class="btn btn-xs ' + infoFlag + '" href="javascript:void(0)" onclick="$.operate.detailTab(\'' + row.id + '/info' + '\')">查看</a> ');
                        actions.push('<a class="btn btn-xs" data-toggle="modal" data-target="#lcjl_Moda" onclick="controlProgressBar(\'' + row.id + '\', ' + row.state + ')">流程记录</a>');
                         return actions.join('');
                    }
                }
            ]
        };
        // $.table.init(options);
        initTable(options1);


        // 监听localStorage的变化,当year值改变时，重新初始化表格
        window.addEventListener("storage", function (event) {
            if (event.key === "year") {
                // 销毁表格，再初始化
                // $('#bootstrap-table0').bootstrapTable('destroy');
                // initTable(options0)
                $('#bootstrap-table1').bootstrapTable('destroy');
                initTable(options1)
                // $('#bootstrap-table2').bootstrapTable('destroy');
                // initTable(options2)
            }
        })
    });

//     ===================================================================================
    function controlProgressBar(dataId, status) {
        const eventList = document.getElementById('event-list');
        autoProgressBar(status);
        // 1. 先显示加载状态
        eventList.innerHTML = `
        <li class="first">
            <i class="node-icon"></i>
            <span class="time">加载中...</span>
            <span class="txt">正在获取数据</span>
        </li>
    `;

        // 2. 发送Ajax请求获取批阅记录
        fetch(prefix + '/opinion/' + dataId)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                console.log('获取到的数据:', data);

                // 清空现有内容
                eventList.innerHTML = '';

                // 处理数据
                if (data.rows && data.rows.length > 0) {
                    data.rows.forEach(record => {
                        const li = document.createElement('li');
                        li.className = 'first'; // 保持与原始结构一致
                        li.innerHTML = `
                        <i class="node-icon"></i>
                        <span class="time">${record.createTime || '无时间信息'}</span>
                        <span class="txt">[${record.state || '无状态'}] - ${record.uname || '匿名用户'}</span>
                    `;
                        eventList.appendChild(li);
                    });
                } else {
                    // 无数据时显示占位内容
                    eventList.innerHTML = `
                    <li class="first">
                        <i class="node-icon"></i>
                        <span class="time">${new Date().toLocaleString()}</span>
                        <span class="txt">[系统] - 暂无记录</span>
                    </li>
                `;
                }
            })
            .catch(error => {
                console.error('获取批阅记录失败:', error);
                eventList.innerHTML = `
                <li class="first error">
                    <i class="node-icon"></i>
                    <span class="time">${new Date().toLocaleString()}</span>
                    <span class="txt">[系统] - 获取记录失败: ${error.message}</span>
                </li>
            `;
            });
    }

// ========================================================================================
//     function autoProgressBar() {
//         const progressBar = document.getElementById('progress-bar');
//         const steps = document.querySelectorAll('[id^="step-"]'); // 获取所有步骤元素
//         let currentStep = 1;
//         const totalSteps = steps.length;
//
//         // 初始状态设置
//         resetAllSteps();
//         document.getElementById('step-1').classList.add('active');
//         progressBar.style.width = '0%';
//
//         // 每3秒执行一次的定时器
//         const interval = setInterval(() => {
//             // 更新当前步骤状态为completed
//             document.getElementById(`step-${currentStep}`).classList.remove('active');
//             document.getElementById(`step-${currentStep}`).classList.add('completed');
//
//             // 如果有下一步，激活下一步
//             if (currentStep < totalSteps) {
//                 currentStep++;
//                 document.getElementById(`step-${currentStep}`).classList.remove('pending');
//                 document.getElementById(`step-${currentStep}`).classList.add('active');
//
//                 // 更新进度条 (根据步骤数计算百分比)
//                 const progressPercent = ((currentStep - 1) / (totalSteps - 1)) * 100;
//                 progressBar.style.width = `${progressPercent}%`;
//
//                 // 添加事件记录
//                 addEvent(`[系统] - 自动进入步骤 ${currentStep}`, false);
//             } else {
//                 // 如果是最后一步，停止定时器
//                 clearInterval(interval);
//                 addEvent('[系统] - 流程已完成', true);
//             }
//         }, 1000); // 3000毫秒 = 3秒
//
//         // 重置所有步骤状态
//         function resetAllSteps() {
//             steps.forEach(step => {
//                 step.classList.remove('active', 'completed');
//                 step.classList.add('pending');
//             });
//         }
//     }

    function autoProgressBar(state) {
        // 获取所有步骤元素
        const steps = document.querySelectorAll('.progress_inner__step');
        const progressBar = document.querySelector('.progress_inner__bar--progress');


        // 遍历所有步骤，重置样式
        steps.forEach(step => {
            step.classList.remove('active', 'completed', 'pending');
            step.querySelector('.status-text').classList.remove('active', 'completed');
        });

        // 重置进度条
        progressBar.style.width = '0';

        // 根据 state 设置相应的步骤颜色
        if (state === 0) {
            document.getElementById('step-1').classList.add('active');
            document.getElementById('step-1').querySelector('.status-text').classList.add('active');
            progressBar.style.width = '0';
        } else if (state === 4) {
            document.getElementById('step-1').classList.add('completed');
            document.getElementById('step-1').querySelector('.status-text').classList.add('completed');
            document.getElementById('step-2').classList.add('completed');
            document.getElementById('step-2').querySelector('.status-text').classList.add('completed');
            document.getElementById('step-3').classList.add('completed');
            document.getElementById('step-3').querySelector('.status-text').classList.add('completed');
            progressBar.style.width = '100%';
        } else if ([1, 2, 6].includes(state)) {
            document.getElementById('step-1').classList.add('completed');
            document.getElementById('step-1').querySelector('.status-text').classList.add('completed');

            // 审核中步骤高亮为 active
            document.getElementById('step-2').classList.add('active');
            document.getElementById('step-2').querySelector('.status-text').classList.add('active');
            progressBar.style.width = '45%';
        } else {
            // 默认情况下，所有步骤为灰色
            steps.forEach(step => {
                step.classList.add('pending');
                step.querySelector('.status-text').classList.add('pending');
            });
        }
    }

</script>
</body>
</html>